<template>
  <div class="page-icons">
    <div class="iconlist">
      <!-- 遍历图标区 -->
      <div class="iconsinfo" v-for="item of iconList" :key="item.id">
        <p><img :src="item.url" alt=""></p>
        <p>{{item.title}}</p>
        <p>{{item.dirc}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Icons',
  props: {
    iconList: Array
  }
}
</script>

<style lang="stylus" scoped>
  .iconlist
    display flex
    flex-flow row wrap
    .iconsinfo
      margin-top 40px
      width 187.5px
      height 176px
      p
        font-size 26px
        margin-top 12px
        width 100%
        text-align center
        img
          width 90px
          height 90px
      p:nth-child(3)
        font-size 22px
        color #ff0000
</style>
